<template>
  <div class="zenbu-view">
    <div class="header">
      <h2>查看人员增补申请单</h2>
      <div>
        <router-link to="/main/biao/zenbu-list">
          <el-button>返回列表</el-button>
        </router-link>
      </div>
    </div>

    <el-descriptions
      v-loading="loading"
      title="基本信息"
      :column="3"
      border>
      <el-descriptions-item label="填单日期">{{ formData.fillDate }}</el-descriptions-item>
      <el-descriptions-item label="申请部门">{{ formData.applicationDepartment }}</el-descriptions-item>
      <el-descriptions-item label="申请职位">{{ formData.applicationPosition }}</el-descriptions-item>
      <el-descriptions-item label="申请人">{{ formData.applicant }}</el-descriptions-item>
      <el-descriptions-item label="员工类别">{{ formData.employeeType }}</el-descriptions-item>
      <el-descriptions-item label="需求日期">{{ formData.demandDate }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="申请人数"
      :column="3"
      border>
      <el-descriptions-item label="原编制">{{ formData.originalStaffing }}</el-descriptions-item>
      <el-descriptions-item label="现有人力">{{ formData.currentStaff }}</el-descriptions-item>
      <el-descriptions-item label="差异人力">{{ formData.differenceStaff }}</el-descriptions-item>
      <el-descriptions-item label="递补人力">
        {{ formData.replacementGender }}
        <template v-if="formData.replacementGender === '男'">{{ formData.replacementMaleCount }}名</template>
        <template v-if="formData.replacementGender === '女'">{{ formData.replacementFemaleCount }}名</template>
      </el-descriptions-item>
      <el-descriptions-item label="递补名额">{{ formData.replacementQuota }}</el-descriptions-item>
      <el-descriptions-item label="增加人力">
        {{ formData.increaseGender }}
        <template v-if="formData.increaseGender === '男'">{{ formData.increaseMaleCount }}名</template>
        <template v-if="formData.increaseGender === '女'">{{ formData.increaseFemaleCount }}名</template>
      </el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="职务要求"
      :column="2"
      border>
      <el-descriptions-item label="年龄要求">{{ formData.ageRequirement }} {{ formData.ageDetails }}</el-descriptions-item>
      <el-descriptions-item label="语言要求">{{ formData.languageRequirement }}</el-descriptions-item>
      <el-descriptions-item label="学历要求">{{ formData.educationRequirement }} {{ formData.educationDetails }}</el-descriptions-item>
      <el-descriptions-item label="专业要求">{{ formData.majorRequirement }} {{ formData.majorDetails }}</el-descriptions-item>
      <el-descriptions-item label="工作经验">{{ formData.experienceRequirement }} {{ formData.experienceDetails }}</el-descriptions-item>
      <el-descriptions-item label="必备技能">{{ formData.necessarySkills }}</el-descriptions-item>
      <el-descriptions-item label="薪酬标准">{{ formData.salaryStandard }}</el-descriptions-item>
      <el-descriptions-item label="复试人员">{{ formData.reinterviewPersons }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions
      title="审批信息"
      :column="3"
      border>
      <el-descriptions-item label="部门主管意见">{{ formData.departmentOpinion }}</el-descriptions-item>
      <el-descriptions-item label="签字">{{ formData.departmentSignature }}</el-descriptions-item>
      <el-descriptions-item label="日期">{{ formData.departmentDate }}</el-descriptions-item>
      
      <el-descriptions-item label="部长/总监意见">{{ formData.directorOpinion }}</el-descriptions-item>
      <el-descriptions-item label="签字">{{ formData.directorSignature }}</el-descriptions-item>
      <el-descriptions-item label="日期">{{ formData.directorDate }}</el-descriptions-item>
      
      <el-descriptions-item label="总经理意见">{{ formData.generalManagerOpinion }}</el-descriptions-item>
      <el-descriptions-item label="签字">{{ formData.generalManagerSignature }}</el-descriptions-item>
      <el-descriptions-item label="日期">{{ formData.generalManagerDate }}</el-descriptions-item>
      
      <el-descriptions-item label="企业管理部意见">{{ formData.corporateManagementOpinion }}</el-descriptions-item>
      <el-descriptions-item label="签字">{{ formData.corporateManagementSignature }}</el-descriptions-item>
      <el-descriptions-item label="日期">{{ formData.corporateManagementDate }}</el-descriptions-item>
      
      <el-descriptions-item label="总裁/董事长意见">{{ formData.presidentOpinion }}</el-descriptions-item>
      <el-descriptions-item label="签字">{{ formData.presidentSignature }}</el-descriptions-item>
      <el-descriptions-item label="日期">{{ formData.presidentDate }}</el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'ZenbuView',
  data() {
    return {
      formData: {},
      loading: false
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        this.loading = true;
        const id = this.$route.params.id;
        const response = await axios.get(`/api/zenbu/view/${id}`);
        this.formData = response.data;
      } catch (error) {
        this.$message.error('获取详情失败：' + error.message);
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style scoped>
.zenbu-view {
  padding: 20px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.el-descriptions {
  margin-bottom: 20px;
}
</style> 